/*.test{*/
/*    color: yellow;*/
/*}*/
/*#test-id{*/
/*    color: aqua;*/
/*}*/
/*   *叫做通配符 表示所有的元素 */
* {
    /*页面初始化*/
    margin: 0;
}

.aa {
    /*    用背景图片将图片写入到div*/
    background-image: url("../img/31_mixq.jpg");
    height: 300px;
    width: 300px;
}

/*.bb > img 子代选择器
.bb  img 叫做后代选择器
*/
.bb > img:nth-child(1) {
    /*    边框的大小， 边框的形状   边框的颜色*/
    border: 10px solid red;
    /*margin 外边距  当前div边框和外面div的距离*/
    /*margin-top: 20px;*/
    /*margin-right: 30px;*/
    /*    直接写margin  上边距  右边距  下边距  左边距 */
    /*    margin: 20px 30px 40px 50px;*/
    /*    上边距  左右边距  下边距*/
    /*    margin: 20px 30px 40px;*/
    /*     上下边距  左右边距 */
    /*    margin: 20px  30px;*/
    /*margin: 20px;*/
    /*    padding: 内边距   边框离内容之间的距离;*/
    padding: 20px 30px 40px 50px;
}

.test {
    /*color: #576c5f;*/
    /*rgb  颜色     rgba  a叫做透明度*/
    /*color: rgb(218, 57, 182);*/
    background-color: rgba(218, 57, 182, 0.2);
    /*字体粗体*/
    font-weight: bold;
    /*字体*/
    font-family: 新宋体;
    /*字体大小*/
    font-size: 50px;
}

.flex {
    /*    要使用flex ，必须将div定义成flex盒子*/
    display: flex;
    /*flex-direction: column-reverse;*/
    /*flex-direction: row-reverse;*/
    /*width: 500px;*/
    border: 1px solid blue;
    /*flex-wrap: wrap-reverse;*/
    /*div盒子对齐*/
    /*justify-content: flex-end;*/
    /*justify-content: space-between;*/
    justify-content: space-around;
    /*文本对齐*/
    text-align: center;
}

.flex > div {
    width: 200px;
    border: 1px solid red;
    /*margin: 20px;*/
}

/*----------------分割线------------------------*/
body {
    display: flex;
    justify-content: center;
}

body > div {
    width: 1000px;
    /*border: 1px solid red;*/
}

.top {
    background-image: url("../img/banner_qtah.jpg");
    /*    将背景图片平铺到div:背景图片和div应该一样大小*/
    /*    background-size: 1000px  500px;*/
    /*    背景图片的宽度应该和外面的div宽度一致*/
    /*    background-size: 1000px;*/
    /*背景图片高宽百分比适应外面的div*/
    background-size: 100% 100%;
    /*    width: 1920px;*/
    /*    既然背景图片宽度已经缩小，那么高度也应该按比例缩小*/
    height: 500px;
    /*height: calc(1000 * 808px / 1920);*/
    /*    ctrl+alt+L 如果没有自动进行格式化代码，那么热键起冲突，
    要么修改idea快捷键，要么修改其他软件的快捷键*/
    /*字体白色*/
    color: white;
}

.top > div {
    display: flex;
    justify-content: center;
    /*border: 1px solid gray;*/
}

.top > div > div {
    width: 900px;
    /*border: 1px solid blue;*/
}

.top > div:nth-child(1) > div {
    display: flex;
    justify-content: space-between;

}

.top > div:nth-child(1) > div > div {
    /*border: 1px solid red;*/
}

.top > div:nth-child(1) > div > div:nth-child(1) {
    background-image: url("../img/logo_g0yv.jpg");
    width: 204px;
    height: 141px;
}

.phone > div:nth-child(1) {
    background-image: url("../img/icon2_03_uc2a.png");
    width: 30px;
    height: 30px;
}

.phone {
    display: flex;
    align-items: center;
}

/*---------------------------nav----------------*/
.nav {
    background-color: rgb(230, 145, 55);
    height: 40px;
}

.nav > div {
    display: flex;
}

.nav > div > div {
    padding: 0 20px;
    /*    字体需要上下居中*/
    line-height: 40px;
}

.nav > div > div:hover {
    background-color: white;
    color: rgb(230, 145, 55);
    cursor: pointer;
}

/*------------------------------menu------------*/
.menu {
    display: flex;
    text-align: center;
}

.menu > div {
    margin: 0 20px;
    background-color: red;
    height: 22px;
    margin-bottom: 40px;
}

.menu-one {
    background-color: red;
}

.show-one {
    display: none;
    background-color: red;
}

/*.menu > div > div:nth-child(2)hover事件  用这个无效果*/
.menu-one:hover .show-one {

    display: block;
    /*position: relative;*/
}


.show-one > div:hover {
    background-color: rgba(107, 28, 192, 1);
}

/*----------------------ad--------------*/
.ad {
    /*border: 1px solid red;*/
    /*font-size: 30px;*/
    /*font-weight: bold;*/
    /*font-family: "微软雅黑 Light";*/
}

.ad > div > div:nth-child(1) {
    margin: 30px 0 10px 0;
    /*字体大小*/
    font-size: 30px;
    display: flex;

}

.ad > div > div:nth-child(1) > div:nth-child(2) {
    margin: 0 15px;
}

.ad > div > div:nth-child(2) {
    color: gray;
    font-size: 10px;
}

.ad > div > div:nth-child(2) > div {
    line-height: 20px;
}

.ad > div > div:nth-child(3) {
    color: rgb(230, 145, 55);
    font-size: 25px;
}

.ad > div > div:nth-child(3) > div:nth-child(2) {
    /*margin-left: 30px;*/
    /*2em相对于当前字符缩进  2个字符*/
    text-indent: 1.2em;
}

div[pw] {
    display: flex;
    align-items: flex-end;

}

/*奇偶数odd even*/
div[pw] > div:nth-child(odd) {
    color: white;
    font-size: 15px;
}

div[pw] > div:nth-child(even) {
    margin-right: 20px;
}
